5
5
.
.
1
1
.
.
a
a
n
n
i
i
m
m
a
a
t
t
i
i
o
o
n
n
I
I
n
n
f
f
o
o
[
[
R
R
]
]
[
[
R
R
]
]
.animation modifier defines how to animate the View when it is redrawn after its Properties change (color, position).
Views are automatically redrawn whenever @State Variables change.
This topic is also covered in Animations tutorial.
Animation types
● .linear – animation is performed at constant speed for the specified duration
● .easeOut – animation starts out fast and slows down toward the end
● .easeIn – animation starts out slow and speeds up toward the end
● .easeInOut – animation starts out slow, speeds up in the middle and then slows down again toward the end
Syntax
.animation(.linear )
.animation(.easeOut )
.animation(.easeIn )
.animation(.easeInOut)
.animation(Animation.linear)
.animation(Animation.linear(duration:5))
.animation(Animation.linear.delay(2))
E
E
x
x
a
a
m
m
p
p
l
l
e
e
In this example when we tap on the Text View we will see the Text View move from its initial to the new position.
Initially we show Text View with offset = 0.
When the Text is tapped we change offset to 100.
Since offset is State Variable, changing its value redraws the View and Text View is shown at new offset position.
Since we have added .animation Modifier to the Text View it will move into new position through an animation.
Example
struct ContentView : View {
@State private var offset:CGFloat = 0 //Define Stata Variable offset
var body: some View {
Text("TEXT") //Add Text View
.offset(x: offset) //We will change offset Property
.onTapGesture { self.offset = 100 } //On Tap changes offset Property
.animation(Animation.easeOut(duration: 5)) //Define animation for when Property changes
}
}
Initial position Final position (after tapping on the Text)
